<template>
  <div class="types">
    <mu-container>
      <p>选项样例</p>
      <mu-select v-model="demo.value">
        <mu-option
          v-for="(option,i) in options"
          :key="i"
          :label="option.name"
          :value="option.id"></mu-option>
      </mu-select>

      <mu-data-table
        v-loading="loading"
        :columns="columns"
        :data="typeList"
        stripe
        border>
        <template slot-scope="scope">
          <td>{{ scope.row.id }}</td>
          <td>{{ scope.row.type_name }}</td>
          <td>{{ scope.row.parent_id }}</td>
          <td>{{ getTypeName(scope.row.parent_id) }}</td>
          <td>
            <mu-button
              v-loading="scope.row.is_deleting"
              color="error"
              @click="handleRemove(scope.row)">删除</mu-button>
          </td>
        </template>
      </mu-data-table>

      <mu-form :model="form" label-position="top" label-width="100">
        <mu-form-item prop="parent_id" label="父分类id">
          <mu-text-field v-model="form.parent_id"></mu-text-field>
        </mu-form-item>
        <mu-form-item prop="type_name" label="分类名">
          <mu-text-field v-model="form.type_name"></mu-text-field>
        </mu-form-item>
        <mu-button v-loading="submitting" color="primary" @click="handleSubmit()">添加分类</mu-button>
      </mu-form>
    </mu-container>

    <mu-dialog
      :esc-press-close="false"
      :overlay-close="false"
      :open.sync="remove.dialog"
      title="警告"
      width="600"
      max-width="80%">
      <p>删除不可恢复，确定删除？</p>
      <mu-button slot="actions" flat color="primary" @click="remove.dialog = false">取消</mu-button>
      <mu-button v-loading="remove.is_deleting" slot="actions" flat color="primary" @click="confirmRemove()">确定</mu-button>
    </mu-dialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { createType, removeType } from '@/api/types'

export default {
  name: 'Types',
  data() {
    return {
      demo: {
        value: null
      },
      columns: [
        { title: 'ID', width: 80, name: 'id' },
        { title: '分类名', name: 'type_name', align: 'center' },
        { title: '父分类ID', name: 'parent_id', width: 120, align: 'center' },
        { title: '分类位置', name: 'parent_id', align: 'center' },
        { title: '操作', align: 'center' }
      ],
      typeList: [],
      loading: false,
      remove: {
        row: null,
        dialog: false,
        is_deleting: false
      },
      form: {
        parent_id: 0,
        type_name: ''
      },
      submitting: false
    }
  },
  computed: {
    ...mapGetters({
      options: 'types/options'
    })
  },
  mounted() {
    this.refresh()
  },
  methods: {
    ...mapActions({
      fetchTypes: 'types/fetchTypes'
    }),
    async refresh() {
      this.loading = true
      try {
        this.typeList = await this.fetchTypes()
      } catch (err) {
        this.$report(err)
      }
      this.loading = false
    },
    getTypeName(id) {
      if (id === 0) {
        return '/'
      }
      const type = this.options.find(item => item.id === id)
      return type ? '/' + type.name : '未知分类路径'
    },
    handleRemove(row) {
      this.remove.row = row
      this.remove.dialog = true
    },
    async confirmRemove() {
      this.remove.is_deleting = true
      try {
        await removeType(this.remove.row.id)
        this.$toast.success('删除分类成功')
        this.typeList = await this.fetchTypes()
      } catch (err) {
        this.$report(err)
      }
      this.remove.dialog = false
      this.remove.is_deleting = false
    },
    async handleSubmit() {
      this.submitting = true
      try {
        await createType(this.form)
        this.$toast.success('添加分类成功')
        this.typeList = await this.fetchTypes()
      } catch (err) {
        this.$report(err)
      }
      this.submitting = false
    }
  }
}
</script>

<style>

</style>
